<template>
    <el-drawer
        v-model="drawerVisible"
        direction="rtl"
        size="480px"
        append-to-body
        destroy-on-close
        :with-header="false"
        :z-index="200"
        class="template-drawer"
        v-bind="attrs"
        @open="onOpen"
    >
        <div class="content-wrap">
            <el-tabs v-model="activeName" class="content-tabs">
                <el-tab-pane :label="templateTypes[templateType].label" name="template">
                    <div class="content-tabs-pane">
                        <div class="left-wrap">
                            <div class="left-header">
                                <div v-if="templateType === 'user-template'" class="add-category-btn" @click="onAddCategory">
                                    <el-icon><icon-add /></el-icon>
                                    新增分类
                                </div>
                            </div>
                            <el-scrollbar height="100%">
                                <el-menu :default-active="selectCategory" @select="onSelectCategory">
                                    <template v-for="(item, index) in categoryList" :key="index">
                                        <template v-if="item?.children?.length > 0">
                                            <el-sub-menu :index="item.id">
                                                <template #title>{{ item.title }}</template>
                                                <template v-for="(childrenItem, childrenIndex) in item.children" :key="childrenIndex">
                                                    <el-menu-item :index="childrenItem.id">{{ childrenItem.title }}</el-menu-item>
                                                </template>
                                            </el-sub-menu>
                                        </template>
                                        <template v-else>
                                            <el-menu-item :index="item.id" :title="item.title" class="category-item">
                                                <div class="category-title">
                                                    {{ item.title }}
                                                </div>
                                                <div v-if="templateType === 'user-template' && !!item.id" class="category-tools">
                                                    <el-icon title="编辑类名" @click.stop="onEditCategory(item)"><icon-edit-outline /></el-icon>
                                                    <el-icon title="删除分类" @click.stop="onDeleteCategory(item.id)"><icon-delete /></el-icon>
                                                </div>
                                            </el-menu-item>
                                        </template>
                                    </template>
                                </el-menu>
                            </el-scrollbar>
                        </div>
                        <div class="right-wrap">
                            <div v-if="false" class="right-header">
                                <el-input v-model="searchValue" placeholder="请输入搜索关键词">
                                    <template #append>搜索</template>
                                </el-input>
                            </div>
                            <el-scrollbar
                                v-loading="templateListLoading"
                                element-loading-text="加载中..."
                                height="100%"
                            >
                                <div
                                    v-infinite-scroll="onLoadMoreTemplate"
                                    :infinite-scroll-immediate="false"
                                    class="template-list"
                                >
                                    <template v-for="(columnItem, columnIndex) in templateListColumn" :key="columnIndex">
                                        <div class="template-list-column">
                                            <template v-for="(item, index) in columnItem" :key="index">
                                                <div
                                                    :class="{
                                                        'active': item.id === selectTemplate.id
                                                    }"
                                                    class="template-item"
                                                    @click="onSelectTemplate(item)"
                                                >
                                                    <div class="template-item-image">
                                                        <el-image
                                                            :src="item.cover"
                                                            fit="fill"
                                                        >
                                                            <template #placeholder>
                                                                <div class="picture-image-slot">图片加载中...</div>
                                                            </template>
                                                            <template #error>
                                                                <div class="picture-image-slot">暂无图片</div>
                                                            </template>
                                                        </el-image>
                                                        <div v-if="templateType === 'user-template'" class="template-item-tools">
                                                            <div v-if="isHasFeature('dev_data')" class="tools-item">
                                                                <div class="tools-item-btn" @click.stop="onCollectionSystem(item)">收藏为系统模板</div>
                                                            </div>
                                                            <div class="tools-item">
                                                                <div class="tools-item-btn" @click.stop="onEditTemplate(item)">编辑</div>
                                                                <div class="tools-item-btn" @click.stop="onDeleteTemplate(item.id)">删除</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div :title="item.title" class="template-item-title">
                                                        <el-tag v-if="templateType === 'user-template'" effect="plain">
                                                            {{ item.type === 'page' ? '单页' : '组件' }}
                                                        </el-tag>
                                                        {{ item.title }}
                                                    </div>
                                                </div>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                                <div v-if="templateListLoading" class="no-data-txt">加载中...</div>
                                <div v-if="!!templateListIsMore && !templateListLoading" style="cursor: pointer;" @click="onLoadMoreTemplate" class="no-data-txt">加载更多</div>
                                <div v-if="!templateListIsMore && templateList.length > 0 && !templateListLoading" class="no-data-txt">没有更多了</div>
                                <div v-if="templateList.length === 0 && !templateListLoading && !templateListIsMore" class="no-data-txt">暂无数据</div>
                            </el-scrollbar>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>

            <collection-template
                ref="collectionTemplateRef"
                title="编辑为单页模板"
                type="page"
            />
            <el-dialog
                v-model="systemTemplateDialogVisible"
                title="收藏为系统模板"
                width="360px"
                append-to-body
                destroy-on-close
            >
                <div class="collection-template-content">
                    <div class="left-wrap">模板分类</div>
                    <div class="right-wrap">
                        <el-cascader
                            :options="systemTemplateCategoryList"
                            :props="systemTemplateCascaderProps"
                            filterable
                            placeholder="选择数据源"
                            clearable
                            class="content-cascader"
                            @change="onSelectSystemTemplateCategory"
                        />
                    </div>
                </div>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="systemTemplateDialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="onConfirmCollectionSystemTemplate">确认</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
        <template #footer>
            <div class="footer-wrap">
                <el-button @click="onCancel">取消</el-button>
                <el-button type="primary" @click="onConfirm">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script>
import { defineComponent, ref, computed, watch, nextTick } from 'vue'
import { useEditStore } from '@/store'
import { ElMessageBox, ElMessage } from 'element-plus'
import {
    getTemplateCategorys,
    getModuleTemplateCategorys,
    getModuleTemplateData,
    getCategoryAllTmplData,

    getUserTemplateCategorys,
    getUserTemplateData,
    saveUserTemplateCategory,
    deleteUserTemplate,
    deleteUserTemplateCategory,
    saveSysTemplate
} from '@/api/app'
import CollectionTemplate from '@/components/edit/collection-template'
import { deepClone } from '@/libs/tools'
import { createComponentAttr } from '@/libs/edit'
import getWidgetListFlat from '@/libs/edit/getWidgetListFlat'
import usePage from '@/libs/edit/pageData'
import useWidget from '@/libs/edit/widgetData'
import usePageHistory from '@/libs/edit/pageHistory'
import usePhoneView from '@/libs/edit/phoneView'
import useFeature from '@/libs/feature'
export default defineComponent({
    name: 'TemplateDrawer',
    components: {
        CollectionTemplate
    },
    setup(_, { attrs }) {
        const editStore = useEditStore()

        const {
            widgetList,
            widgetListFlat,
            onSelectWidget
        } = useWidget()

        const {
            onAddPageHistory
        } = usePageHistory()

        const {
            customPageData
        } = usePage()
        
        const {
            setScrollTopId
        } = usePhoneView()

        const {
            isHasFeature
        } = useFeature()

        const drawerVisible = ref(false)
        const templateDrawerVisible = computed({
            get: () => editStore.templateDrawerVisible,
            set: val => editStore.templateDrawerVisible = val
        })
        const activeName = ref('template')
        const searchValue = ref('')

        const systemTemplateDialogVisible = ref(false)
        const systemTemplateCategoryList = ref([])
        const systemTemplateCategoryLoading = ref(false)
        const systemTemplateCategoryId = ref('')
        const systemTemplateId = ref('')
        const systemTemplateCascaderProps = ref({
            emitPath: false,
            label: 'title',
            value: 'id'
        })

        const collectionTemplateRef = ref(null)

        const templateType = ref('')
        const templateTypes = {
            // 控件模板类型
            'free-vessel': {
                label: '自由模板库',
                categoryId: 'bkffsjt6r2fhnf17140g', // 分类ID
                allDataId: 'bkffsat6r2fhnf171400' // 获取全部数据的ID
            },
            'popup-window': {
                label: '弹窗库',
                categoryId: 'bkffsjt6r2fhnf17140g',
                allDataId: 'bkffsat6r2fhnf171400'
            },
            'sidebar': {
                label: '侧边栏库',
                categoryId: 'bkffsjt6r2fhnf17140g',
                allDataId: 'bkffsat6r2fhnf171400'
            },
            // 组合模板类型
            'combination-template': {
                label: '组合模板库',
                categoryId: 'module',
                allDataId: 'bkffsat6r2fhnf171400'
            },
            // 单页模板类型
            'single-page-template': {
                label: '单页模板库',
                categoryId: 'cutPage',
                allDataId: 'bkfg86t6r2fhnf1715cg'
            },
            // 我的模板类型
            'user-template': {
                label: '我的模板库'
            }
        }

        const categoryList = ref([])
        const selectCategory = ref('')
        const categoryListLoading = ref(false)

        const templateList = ref([])
        const selectTemplate = ref({})
        const templateListPage = ref(1)
        const templateListPageSize = ref(30)
        const templateListIsMore = ref(true)
        const templateListLoading = ref(false)

        let startData = null
        
        // 模板列表(分栏，为渲染瀑布流)
        const templateListColumn = computed(() => {
            return [
                templateList.value.filter((item, index) => index % 2 === 0),
                templateList.value.filter((item, index) => index % 2 === 1)
            ]
        })

        const appData = computed(() => editStore.appData)
        const pageId = computed(() => editStore.pageId)
        const pageData = computed({
            get: () => appData.value[pageId.value],
            set: val => appData.value[pageId.value] = val
        })

        watch(
            () => drawerVisible.value,
            (newValue) => {
                templateDrawerVisible.value = newValue
                if (!newValue) {
                    if (templateType.value === 'user-template') {
                        if (selectTemplate.value.type === 'page') {
                            if (!!startData) {
                                pageData.value = startData
                                startData = null
                                selectTemplate.value = {}
                            }
                        } else {
                            const selectWidget = widgetListFlat.value?.[selectTemplate.value?.data?.eles?.id]
                            selectWidget?.parentContent?.splice(selectWidget?.widgetIndex, 1)
                            selectTemplate.value = {}
                        }
                    }
                    // 单页模板
                    else if (templateType.value === 'single-page-template') {
                        if (!!startData) {
                            pageData.value = startData
                            startData = null
                            selectTemplate.value = {}
                        }
                    }
                    // 控件模板
                    else {
                        const selectWidget = widgetListFlat.value?.[selectTemplate.value?.data?.eles?.id]
                        selectWidget?.parentContent?.splice(selectWidget?.widgetIndex, 1)
                        selectTemplate.value = {}
                    }
                }
            }
        )

        const onOpen = () => {
            getTemplateCategoryList()
        }

        const show = ({ type }) => {
            if (!templateTypes[type]) {
                ElMessage({
                    message: '模板库不存在',
                    type: 'warning',
                })
                return
            }
            templateType.value = type
            drawerVisible.value = true
        }

        // 获取模板分类列表
        const getTemplateCategoryList = () => {
            if (['combination-template', 'single-page-template'].includes(templateType.value)) {
                categoryListLoading.value = true
                getTemplateCategorys(templateTypes[templateType.value].categoryId).then(res => {
                    if (res.Status === 1) {
                        const list = res?.Data?.[0]?.children || []
                        const forChildren = array => {
                            return array.map(item => ({
                                id: item.Id,
                                title: item.Title,
                                children: forChildren(item?.children || [])
                            }))
                        }
                        categoryList.value = forChildren(list)
                        if (!!templateTypes[templateType.value].allDataId) {
                            categoryList.value.unshift({
                                id: '',
                                title: '全部'
                            })
                        }
                        onSelectCategory(categoryList.value?.[0]?.id)
                    }
                }).finally(() => {
                    categoryListLoading.value = false
                })
            } else if (templateType.value === 'user-template') {
                categoryListLoading.value = true
                getUserTemplateCategorys().then(res => {
                    if (res.Status === 1) {
                        const list = res?.Data?.Data || []
                        categoryList.value = list.map(item => ({
                            id: item.Id,
                            title: item.Title,
                            pid: item.Pid
                        }))
                        categoryList.value.unshift({
                            id: '',
                            title: '全部'
                        })
                        onSelectCategory(categoryList.value?.[0]?.id)
                    }
                }).finally(() => {
                    categoryListLoading.value = false
                })
            } else {
                categoryListLoading.value = true
                getModuleTemplateCategorys(templateTypes[templateType.value].categoryId).then(res => {
                    if (res.Status === 1) {
                        const list = res.Data || []
                        categoryList.value = list.map(item => ({
                            id: item.Id,
                            title: item.Title
                        }))
                        if (!!templateTypes[templateType.value].allDataId) {
                            categoryList.value.unshift({
                                id: '',
                                title: '全部'
                            })
                        }
                        onSelectCategory(categoryList.value?.[0]?.id)
                    }
                }).finally(() => {
                    categoryListLoading.value = false
                })
            }
        }

        // 获取模板列表
        const getTemplateList = () => {
            if (templateType.value === 'user-template') {
                templateListLoading.value = true
                getUserTemplateData({
                    id: selectCategory.value,
                    page: templateListPage.value,
                    pageSize: templateListPageSize.value
                }).then(res => {
                    if (res.Status === 1) {
                        const data = res.Data
                        const list = data?.records || []
                        templateList.value = list.map(item => {
                            const templateData = JSON.parse(item.Data)
                            if (Object.prototype.toString.call(templateData) === '[object Object]') {
                                const templateFlat = getWidgetListFlat([templateData])
                                Object.values(templateFlat).forEach(item => {
                                    createComponentAttr(item.widgetData)
                                })
                            }
                            return {
                                id: item.Id,
                                title: item.Title,
                                cover: item.Cover,
                                type: item.Type, // 模板类型(page单页，comb组合)
                                sort: item.Sort,
                                categoryId: item.CategoryId,
                                data: templateData
                            }
                        })
                        if (data.page >= data['total_page']) {
                            templateListIsMore.value = false
                        }
                    }
                }).finally(() => {
                    templateListLoading.value = false
                })
            } else {
                if (!!selectCategory.value) {
                    // 获取模板列表(系统)
                    templateListLoading.value = true
                    getModuleTemplateData({
                        id: selectCategory.value,
                        page: templateListPage.value,
                        pageSize: templateListPageSize.value
                    }).then(res => {
                        if (res.Status === 1) {
                            const data = res.Data
                            const list = data?.records || []
                            templateList.value = list.map(item => {
                                const templateData = JSON.parse(item.Data)
                                if (Object.prototype.toString.call(templateData) === '[object Object]') {
                                    const templateFlat = getWidgetListFlat([templateData])
                                    Object.values(templateFlat).forEach(item => {
                                        createComponentAttr(item.widgetData)
                                    })
                                }
                                return {
                                    id: item.Id,
                                    title: item.Title,
                                    cover: item.Cover,
                                    data: templateData
                                }
                            })
                            if (data.page >= data['total_page']) {
                                templateListIsMore.value = false
                            }
                        }
                    }).finally(() => {
                        templateListLoading.value = false
                    })
                } else {
                    // 获取模板列表全部(系统)
                    templateListLoading.value = true
                    getCategoryAllTmplData({
                        id: templateTypes[templateType.value].allDataId,
                        page: templateListPage.value,
                        pageSize: templateListPageSize.value
                    }).then(res => {
                        if (res.Status === 1) {
                            const data = res.Data
                            const list = data?.records || []
                            templateList.value = list.map(item => {
                                const templateData = JSON.parse(item.Data)
                                if (Object.prototype.toString.call(templateData) === '[object Object]') {
                                    const templateFlat = getWidgetListFlat([templateData])
                                    Object.values(templateFlat).forEach(item => {
                                        createComponentAttr(item.widgetData)
                                    })
                                }
                                return {
                                    id: item.Id,
                                    title: item.Title,
                                    cover: item.Cover,
                                    data: templateData
                                }
                            })
                            if (data.page >= data['total_page']) {
                                templateListIsMore.value = false
                            }
                        }
                    }).finally(() => {
                        templateListLoading.value = false
                    })
                }
            }
        }

        // 选中模板分类
        const onSelectCategory = id => {
            selectCategory.value = id
            templateListPage.value = 1
            templateListIsMore.value = true
            templateList.value = []
            getTemplateList()
        }

        // 添加模板分类
        const onAddCategory = () => {
            if (templateType.value === 'user-template') {
                ElMessageBox.prompt('请输入分类名', '添加分类', {
                    inputValue: '分类名',
                    inputValidator: value => value !== '',
                    inputErrorMessage: '分类名不能为空',
                }).then(({ value }) => {
                    saveUserTemplateCategory({
                        title: value,
                        pId: 0
                    }).then(res => {
                        if (res.Status == 1) {
                            ElMessage({
                                type: 'success',
                                message: '添加分类成功'
                            })
                            getTemplateCategoryList()
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: '添加分类失败'
                            })
                        }
                    })
                }).catch(() => {})
            }
        }

        // 编辑分类
        const onEditCategory = data => {
            if (templateType.value === 'user-template') {
                ElMessageBox.prompt('请输入分类名', '编辑分类', {
                    inputValue: data.title,
                    inputValidator: value => value !== '',
                    inputErrorMessage: '分类名不能为空',
                }).then(({ value }) => {
                    saveUserTemplateCategory({
                        title: value,
                        pId: data.pid,
                        id: data.id
                    }).then(res => {
                        if (res.Status == 1) {
                            ElMessage({
                                type: 'success',
                                message: '编辑分类成功'
                            })
                            getTemplateCategoryList()
                        } else {
                            ElMessage({
                                type: 'warning',
                                message: '编辑分类失败'
                            })
                        }
                    })
                }).catch(() => {})
            }
        }

        // 删除分类
        const onDeleteCategory = id => {
            if (templateType.value === 'user-template') {
                ElMessageBox.confirm('确定删除该分类?', '提示', {
                    type: 'warning',
                }).then(() => {
                    categoryListLoading.value = true
                    deleteUserTemplateCategory(id).then(res => {
                        if (res.Status === 1) {
                            getTemplateCategoryList()
                            ElMessage({
                                message: '删除成功',
                                type: 'success'
                            })
                        } else {
                            ElMessage({
                                message: '删除失败',
                                type: 'warning'
                            })
                        }
                    }).finally(() => {
                        categoryListLoading.value = false
                    })
                }).catch(() => {})
            }
        }

        // 选中模板
        const onSelectTemplate = data => {
            if (Object.prototype.toString.call(data.data) !== '[object Object]') {
                ElMessage.error('无效模板')
                return
            }
            if (templateType.value === 'user-template') {
                if (data.type === 'page') {
                    selectTemplate.value = data
                    startData = deepClone(pageData.value)
                    pageData.value = deepClone(data.data)
                } else {
                    const selectWidget = widgetListFlat.value?.[selectTemplate.value?.data?.eles?.id]
                    selectWidget?.parentContent?.splice(selectWidget?.widgetIndex, 1)
                    widgetList.value.push(deepClone(data.data))
                    selectTemplate.value = data
                    nextTick(() => {
                        setScrollTopId(data.data.eles.id)
                    })
                }
            }
            // 单页模板
            else if (templateType.value === 'single-page-template') {
                selectTemplate.value = data
                startData = deepClone(pageData.value)
                pageData.value = deepClone(data.data)
            }
            // 控件模板
            else {
                const selectWidget = widgetListFlat.value?.[selectTemplate.value?.data?.eles?.id]
                selectWidget?.parentContent?.splice(selectWidget?.widgetIndex, 1)
                widgetList.value.push(deepClone(data.data))
                selectTemplate.value = data
                nextTick(() => {
                    setScrollTopId(data.data.eles.id)
                })
            }
        }

        // 编辑模板
        const onEditTemplate = data => {
            if (templateType.value === 'user-template') {
                collectionTemplateRef.value.show({
                    title: data.title,
                    categoryId: data.categoryId,
                    cover: data.cover,
                    data: data.data,
                    id: data.id,
                    sort: data.sort
                }).then(() => {
                    // console.log('成功')
                }).catch(() => {})
            }
        }

        // 删除模板
        const onDeleteTemplate = id => {
            if (templateType.value === 'user-template') {
                ElMessageBox.confirm('确定删除该模板?', '提示', {
                    type: 'warning',
                }).then(() => {
                    templateListLoading.value = true
                    deleteUserTemplate(id).then(res => {
                        if (res.Status === 1) {
                            const findIndex = templateList.value.findIndex(item => item.id === id)
                            if (findIndex !== -1) {
                                templateList.value.splice(findIndex, 1)
                            }
                            ElMessage({
                                message: '删除成功',
                                type: 'success'
                            })
                        } else {
                            ElMessage({
                                message: '删除失败',
                                type: 'warning'
                            })
                        }
                    }).finally(() => {
                        templateListLoading.value = false
                    })
                }).catch(() => {})
            }
        }

        // 获取系统模板分类
        const getSystemTemplateCategory = () => {
            getTemplateCategorys().then(res => {
                if (res.Status === 1) {
                    const list = res?.Data || []
                    const forChildren = array => {
                        return array.map(item => ({
                            id: item.Id,
                            title: item.Title,
                            children: forChildren(item?.children || [])
                        }))
                    }
                    systemTemplateCategoryList.value = forChildren(list)
                }
            })
        }
        // 收藏为系统模板
        const onCollectionSystem = data => {
            systemTemplateDialogVisible.value = true
            systemTemplateId.value = data.id
            systemTemplateCategoryId.value = ''
            getSystemTemplateCategory()
        }
        // 选择系统模板分类
        const onSelectSystemTemplateCategory = id => {
            systemTemplateCategoryId.value = id
        }
        // 确定收藏为系统模板
        const onConfirmCollectionSystemTemplate = () => {
            if (!systemTemplateCategoryId.value) {
                ElMessage({
                    message: '请选择一个模板分类',
                    type: 'warning'
                })
                return
            }
            saveSysTemplate({
                categoryId: systemTemplateCategoryId.value,
                id: systemTemplateId.value
            }).then(res => {
                if (res.Status === 1) {
                    ElMessage({
                        message: '收藏系统模板成功',
                        type: 'success'
                    })
                    systemTemplateDialogVisible.value = false
                    systemTemplateId.value = ''
                    systemTemplateCategoryId.value = ''
                } else {
                    ElMessage({
                        message: '收藏系统模板失败',
                        type: 'warning'
                    })
                }
            })
        }

        // 加载更多模板
        const onLoadMoreTemplate = () => {
            if (!templateListIsMore.value && !templateListLoading.value) return
            templateListPageSize.value += 1
            getTemplateList()
        }

        const onCancel = () => {
            drawerVisible.value = false
        }
        const onConfirm = () => {
            if (!selectTemplate.value?.data) {
                ElMessage({
                    message: '请选择一个模板',
                    type: 'warning',
                })
                return
            }
            if (templateType.value === 'user-template') {
                if (selectTemplate.value.type === 'page') {
                    pageData.value.router = pageId.value
                    customPageData.value.forEach(item => {
                        item.pages.forEach(page => {
                            if (page.router === pageId.value) {
                                page.name = pageData.value.customFeature.name
                                return
                            }
                        })
                    })
                    onAddPageHistory()
                    startData = null
                    selectTemplate.value = {}
                } else {
                    onSelectWidget([selectTemplate.value?.data?.eles?.id])
                    setScrollTopId(selectTemplate.value?.data?.eles?.id)
                    onAddPageHistory()
                    selectTemplate.value = {}
                }
            }
            // 单页模板
            else if (templateType.value === 'single-page-template') {
                pageData.value.router = pageId.value
                customPageData.value.forEach(item => {
                    item.pages.forEach(page => {
                        if (page.router === pageId.value) {
                            page.name = pageData.value.customFeature.name
                            return
                        }
                    })
                })
                onAddPageHistory()
                startData = null
                selectTemplate.value = {}
            }
            // 控件模板
            else {
                onSelectWidget([selectTemplate.value?.data?.eles?.id])
                setScrollTopId(selectTemplate.value?.data?.eles?.id)
                onAddPageHistory()
                selectTemplate.value = {}
            }
            drawerVisible.value = false
            ElMessage({
                message: '添加成功',
                type: 'success',
            })
        }

        return {
            attrs,
            drawerVisible,
            activeName,
            searchValue,

            isHasFeature,

            systemTemplateDialogVisible,
            systemTemplateCategoryList,
            systemTemplateCategoryLoading,
            systemTemplateCategoryId,
            systemTemplateCascaderProps,

            collectionTemplateRef,

            templateType,
            templateTypes,
            
            categoryList,
            selectCategory,
            categoryListLoading,

            templateList,
            templateListColumn,
            templateListIsMore,
            templateListLoading,
            selectTemplate,

            show,
            onOpen,
            onSelectCategory,
            onAddCategory,
            onEditCategory,
            onDeleteCategory,
            onSelectTemplate,
            onEditTemplate,
            onDeleteTemplate,
            getSystemTemplateCategory,
            onCollectionSystem,
            onSelectSystemTemplateCategory,
            onConfirmCollectionSystemTemplate,
            onLoadMoreTemplate,
            onCancel,
            onConfirm
        }
    }
})
</script>

<style lang="less">
@import './template-drawer.less';
</style>